<template>
    <div class="app-container">
        <div class="container">
            <div class="main page page-list">
                <div class="head-container">
                    <el-card shadow="never">
                        <div class="search-bar">
                            <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">

                                <el-form-item label="管理账号">
                                    <el-input v-model="searchModel.mobile" placeholder="管理账号" />
                                </el-form-item>

                                <el-form-item class="operations">
                                    <el-button type="primary" @click="search">查询</el-button>
                                    <el-button type="default" @click="reset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-card>
                </div>


                <div class="data-list-wrap">
                    <el-card shadow="never">
                        <el-table v-loading="loading" :data="list" size="small" style="width: 100%;">

                            <el-table-column prop="registerTime" label="注册时间" />

                            <el-table-column label="管理账号">
                                <template slot-scope="scope">
                                    {{ scope.row.mobile }}
                                </template>
                            </el-table-column>

                            <el-table-column label="关联管理公司数">
                                <template slot-scope="scope">
                                    {{ scope.row.companyCount ? scope.row.companyCount : "0" }}
                                </template>
                            </el-table-column>

                            <el-table-column fixed="right" label="添加/删除记录" width="180">

                                <template slot-scope="scope">
                                    <div class="operations">
                                        <el-button v-permission="['ADMIN', 'operation-user-bind-log::search']" size="mini" type="text" plain @click="openOperatorBind(scope.row.id)">
                                            查看
                                        </el-button>

                                    </div>

                                </template>
                            </el-table-column>


                            <el-table-column label="账号状态">
                                <template slot-scope="scope">
                                    <span class="text-success" v-if="scope.row.securityStatus === 0">正常</span>
                                    <span class="text-danger" v-if="scope.row.securityStatus === -1">已冻结</span>
                                    <div class="text-danger" v-if="scope.row.securityRemark">({{ scope.row.securityRemark
                                    }})</div>
                                </template>
                            </el-table-column>

                            <el-table-column fixed="right" label="操作" width="180">

                                <template slot-scope="scope">
                                    <div class="operations">
                                        <el-popover placement="top" width="200" :ref="'updateOp' + scope.row.id"
                                            trigger="click">
                                            <p>确定冻结该用户吗？</p>
                                            <div style="text-align: right; margin: 0">
                                                <el-button size="mini" type="text" @click="
                                                    $refs['updateOp' + scope.row.id].doClose()
                                                    ">取消</el-button>
                                                <el-button :loading="opLoading" type="primary" size="mini"
                                                    @click="doUpdateOp(scope.row.id)">确定</el-button>
                                            </div>
                                            <el-button v-if="scope.row.securityStatus === 0"
                                                v-permission="['ADMIN', 'operation-user::update-status']" type="text"
                                                slot="reference" :value="scope.row.id">
                                                冻结
                                            </el-button>
                                        </el-popover>

                                        <el-popover placement="top" width="200" :ref="'resetPasswrod' + scope.row.id"
                                            trigger="click">
                                            <p>确定重置该用户登录密码吗？</p>
                                            <div style="text-align: right; margin: 0">
                                                <el-button size="mini" type="text" @click="
                                                    $refs['resetPasswrod' + scope.row.id].doClose()
                                                    ">取消</el-button>
                                                <el-button :loading="opLoading" type="primary" size="mini"
                                                    @click="doResetPassword(scope.row.id)">确定</el-button>
                                            </div>
                                            <el-button v-permission="['ADMIN', 'operation-user::reset-password']"
                                                type="text" slot="reference" :value="scope.row.id">
                                                重置登录密码
                                            </el-button>
                                        </el-popover>
                                    </div>

                                </template>
                            </el-table-column>
                        </el-table>


                        <div class="paging-wrap">
                            <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                                :page-size="searchModel.pagesize" :total="searchModel.count"
                                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </el-card>
                </div>

            </div>
        </div>
        <!-- 重置密码 -->
        <el-dialog title="新密码" :close-on-click-modal="false" :modal-append-to-body="false" class="dialog-action" width="50%"
            :visible.sync="resettingPasswordDialog">
            <el-form :model="resettingForm" label-width="100px">
                <el-form-item label="密码重置为:">
                    <span class="text-danger">{{ resettingForm.password }}</span>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :loading="opLoading" type="primary" @click="doCopy($event)">复制</el-button>
            </div>
        </el-dialog>
        <!-- 查看操作记录 -->
        <el-dialog title="添加/删除记录" :close-on-click-modal="false" :modal-append-to-body="false" class="dialog-action"
            width="50%" :visible.sync="dialogBind">
            <el-card shadow="never">
                <el-table v-loading="loading" :data="logList" size="small" style="width: 100%;">

                    <el-table-column prop="createTime" label="操作时间" />

                    <el-table-column label="操作状态">
                        <template slot-scope="scope">
                            <span class="text-success" v-if="scope.row.type === 'add'">添加</span>
                            <span class="text-danger" v-if="scope.row.type === 'delete'">删除</span>
                        </template>
                    </el-table-column>


                    <el-table-column label="商户名称">
                        <template slot-scope="scope">
                            {{ scope.row.userName }}
                        </template>
                    </el-table-column>


                </el-table>
                <div class="paging-wrap">
                    <el-pagination :current-page="searchModel2.pageNo" :page-sizes="[10, 20, 50, 100]"
                        :page-size="searchModel2.pagesize" :total="searchModel2.count"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2" />
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>
  
<script>
import clipboard from "../../utils/clipboard";
import { searchOperatorUser, resetOperatorUserPassword, updateOperatorUserSecurityStatus, searchOperatorUserBindLog } from '@/api/business'
import moment from "moment";
const defaultModel = {
    mobile: "",
    pageNo: 1,
    pageSize: 10,
    count: 0
}
const defaultModel2 = {
    operatorUserId: "",
    pageNo: 1,
    pageSize: 10,
    count: 0
}
export default {
    components: {},
    data() {
        return {
            searchModel: _.cloneDeep(defaultModel),
            searchModel2: _.cloneDeep(defaultModel2),
            list: [],
            dialogBind: false,
            loading: false,
            curData: null,
            opLoading: false,
            extra: "",
            resettingPasswordDialog: false,
            resettingForm: {
                password: "",
            },
            logList: [],
        }
    },
    mounted() {
        // 判断路由中是否有daily参数，如果有代表从日账单跳转过来
        const param = this.$route.query.from
        if (param === 'daily') {
            this.searchModel.maxAmount = 0
            this.searchModel.minAmount = ''
        }
        this.init()
    },
    methods: {
        openOperatorBind(id) {
            this.dialogBind = true
            this.getList2(id,1)
        },

        search() {
            this.getList(1)
        },

        getList(pageNo) {
            var self = this;
            this.loading = true;
            if (pageNo != undefined) {
                this.searchModel.pageNo = pageNo;
            }
            let searchModel = _.cloneDeep(this.searchModel);
            searchOperatorUser(this.compileSearchModel(searchModel))
                .then((data) => {
                    self.searchModel.count = data.count;
                    self.list = data.data;
                    self.loading = false;
                })
                .catch((err) => { });
        },

        getList2(id,pageNo) {
            var self = this;
            this.loading = true;
            if (pageNo != undefined) {
                this.searchModel2.pageNo = pageNo;
            }
            let searchModel = _.cloneDeep(this.searchModel2);
            
            searchOperatorUserBindLog(this.compileSearchModel2(id,searchModel))
                .then((data) => {
                    self.searchModel.count = data.count;
                    self.logList = data.data;
                    self.loading = false;
                })
                .catch((err) => { });
        },

        // 确认冻结角色
        doUpdateOp(id) {
            this.opLoading = true;
            let form = {
                id: id
            }
            updateOperatorUserSecurityStatus(form).then((resp => {
                if (resp.success) {
                    this.$notify({
                        title: "冻结成功",
                        type: "success",
                        duration: 2500,
                    });
                    this.$refs["updateOp" + id].doClose();
                    this.search();
                } else {
                    this.$message.error(resp.resultMessage);
                }
                this.opLoading = false;
            })).catch(err => {

            })
        },

        // 确认重置密码
        doResetPassword(id) {
            this.opLoading = true;
            let form = {
                id: id
            }
            resetOperatorUserPassword(form).then((resp => {
                if (resp.success) {
                    this.$notify({
                        title: "重置成功",
                        type: "success",
                        duration: 2500,
                    });
                    this.resettingForm.password = resp.data
                    this.resettingPasswordDialog = true;
                    this.$refs["resetPasswrod" + id].doClose();
                    this.search();
                } else {
                    this.$message.error(resp.resultMessage);
                }
                this.opLoading = false;
            })).catch(err => {

            })
        },

        //复制链接
        doCopy(e) {
            let password = this.resettingForm.password
            let info = password
            clipboard(info, e);
        },


        reset() {
            this.searchModel = _.cloneDeep(defaultModel)
            this.getList(1)
        },
        compileSearchModel(searchModel) {
            searchModel.pageNo = searchModel.pageNo - 1
            
            return searchModel
        },

        compileSearchModel2(id,searchModel) {
            searchModel.pageNo = searchModel.pageNo - 1
            searchModel.operatorUserId = id
            return searchModel
        },
        // 修改分页
        handleSizeChange(val) {
            this.searchModel.pageSize = val
            this.getList(1)
        },
        // 修改页面
        handleCurrentChange(val) {
            this.getList(val)
        },
          // 修改分页
          handleSizeChange2(val) {
            this.searchModel2.pageSize = val
            this.getList2(1)
        },
        // 修改页面
        handleCurrentChange2(val) {
            this.getList2(val)
        },

        init() {
            this.getList(1)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.sumBox {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    padding: 0 2px;
    margin-bottom: 10px;
}

.sumItem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-items: center;
    margin-right: 16px;
    height: 150px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    font-weight: 600;

    .sumdata {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 600;
    }

}

.substationGroup {
    margin-bottom: 16px;

    .substationItem {
        margin-right: 20px;
    }
}
</style>
  0